{{define "title"}}Auth Service - Groups{{end}}

{{define "content"}}

<style>
  :not(.active).list-group-item.read-only-group,
  :not(.active).list-group-item.read-only-group:hover {
    background-color: #eeeeee;
  }

  /* Vertically align icon */
  .list-item-icon {
    position: absolute;
    right: 10px;
    min-height: 30px;
    line-height: 30px;
    top: 50%;
    margin-top: -15px;
  }
</style>

<script type="text/javascript" src="/ui/static/js/groups.js"></script>

<template id="insufficient-perms-template">
  <div style="text-align: center;">
    You do not have sufficient permissions to modify this group.
  </div>
  <div id="insufficient-perms-owners-section" style="text-align: center;">
    See the <a>owning group</a> to find out who can help with a change.
  </div>
</template>

<template id="group-scroller-row-template">
  <a class="list-group-item list-group-item-action">
    <p class="fw-bold fs-6 mb-0"></p>
    <small class="mb-0"></small>
  </a>
</template>

<template id="submit-feedback-template">
  <div class="alert alert-dismissible" role="alert">
    <strong></strong>&nbsp;<span></span>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</template>

<template id="new-group-form-template">
  <div class="card h-100">
    <div class="card-header">
      <h5 class="card-title d-flex my-0">
        <span class="flex-grow-1" id="group-heading">
          Create new group
        </span>
      </h5>
    </div>
    <div class="card-body">
      <div class="d-flex justify-content-center">
        <div id="submit-spinner" class="spinner-border spinner-border-sm text-secondary mb-3" style="display: none;"></div>
      </div>
      <div id="submit-feedback"></div>
      <form id="group-form" class="mx-2">
        <div class="row mb-3">
          <label for="group-name-box" class="col-2 col-form-label">Group Name</label>
          <div class="col">
            <input class="form-control groupName required" rows="1" id="group-name-box" placeholder="required"></input>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <div class="row mb-3">
          <label for="description-box" class="col-2 col-form-label">Description</label>
          <div class="col">
            <textarea class="form-control required" rows="3" id="description-box" placeholder="required"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <div class="row">
          <label for="owners-box" class="col-2 col-form-label">Owners</label>
          <div class="col">
            <textarea class="form-control groupNameOrEmpty" rows="1" id="owners-box" placeholder="administrators"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <hr />
        <div class="row mb-3">
          <label for="membersAndGlobs" class="col-2 col-form-label">Members</label>
          <div class="col">
            <textarea class="form-control membersAndGlobsList" rows="12" id="membersAndGlobs"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <div class="row">
          <label for="nested" class="col-2 col-form-label">Subgroups</label>
          <div class="col">
            <textarea class="form-control groupList" rows="5" id="nested"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <hr />
        <button type="submit" class="btn btn-primary">Create group</button>
      </form>
    </div>
  </div>
</template>

<template id="edit-group-form-template">
  <div class="card h-100">
    <div class="card-header">
      <h5 class="card-title d-flex my-0">
        <span id="group-heading" class="flex-grow-1"></span>
        <a id="group-change-log-link" class="mx-1" data-bs-toggle="tooltip" data-bs-container="body"
          data-bs-placement="top" title="Changes">
          <i class="bi bi-calendar3" style="font-size: 16px; color: #333"></i>
        </a>
        <a id="group-lookup-link" class="mx-1" data-bs-toggle="tooltip" data-bs-container="body" data-bs-placement="top"
          title="View in Lookup">
          <i class="bi bi-search" style="font-size: 16px; color: #333"></i>
        </a>
        <a id="group-listing-link" class="mx-1" data-bs-toggle="tooltip" data-bs-container="body"
          data-bs-placement="top" title="Full listing">
          <i class="bi bi-list-ul" style="font-size: 16px; color: #333"></i>
        </a>
      </h5>
    </div>
    <div class="card-body">
      <div class="d-flex justify-content-center">
          <div id="submit-spinner" class="spinner-border spinner-border-sm text-secondary mb-3" style="display: none;"></div>
      </div>
      <div id="submit-feedback"></div>
      <form id="group-form" class="mx-2">
        <div class="row mb-3">
          <label for="description-box" class="col-2 col-form-label">Description</label>
          <div class="col">
            <textarea class="form-control required" rows="3" id="description-box"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <div class="row">
          <label for="owners-box" class="col-2 col-form-label">Owners</label>
          <div class="col">
            <textarea class="form-control groupNameOrEmpty" rows="1" id="owners-box"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <hr />
        <div class="row mb-3 external-group-info">
          <label for="membersAndGlobs" class="col-2 col-form-label">Members</label>
          <div class="col" id="membersAndGlobsCol">
            <textarea class="form-control membersAndGlobsList" rows="12" id="membersAndGlobs"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <div class="row">
          <label for="nested" class="col-2 col-form-label">Subgroups</label>
          <div class="col">
            <textarea class="form-control groupList" rows="5" id="nested"></textarea>
            <span class="error" aria-live="polite"></span>
          </div>
        </div>
        <hr />
        <button id="edit-btn" type="submit" class="btn btn-primary">Update group</button>
        <button id="delete-btn" type="button" class="btn btn-danger">Delete group</button>
      </form>
    </div>
  </div>
</template>

<div class="container px-0">
  <div id="loading-box-placeholder" class="row"></div>

  <div id="main-content" class="container-fluid" style="display: none;">
    <div class="row">
      <div class="col-4 px-0 d-flex flex-column">
        <div class="row">
          <div class="input-group">
            <input id="search-box" class="form-control" type="search" aria-label="Search"
              placeholder="Search for an existing group">
          </div>
        </div>
        <div class="row justify-content-between align-items-center">
          <div class="col-auto my-2">
            <div class="form-check sm-6">
              <input class="form-check-input" type="checkbox" value="" id="external-check">
              <label class="form-check-label" for="external-check">
                Show external groups
              </label>
            </div>
          </div>
          {{if .IsGroupCreator}}
          <div class="col-auto my-2">
            <button type="button" class="btn btn-outline-primary" id="create-group-btn">Create</button>
          </div>
          {{end}}
        </div>
        <div class="row flex-grow-1">
          <div class="col">
            <ul
              id="group-chooser"
              class="list-group list-group-flush navbar-nav-scroll px-0 my-0 border border-1 rounded-start">
              <!-- Load group-scroller-row template. -->
            </ul>
          </div>
        </div>
      </div>
      <div class="col ms-3 px-0" id="group-content">
        <!-- Placeholder for content load error. -->
        <div id="content-load-error-placeholder"></div>

        <!-- Load group-form template here -->
        <div id="content-form"></div>
      </div>
    </div>
  </div>

  <!-- Placeholder for listing error. -->
  <div id="list-api-error-placeholder"></div>

</div>

{{end}}